<template >
  <div class="login">
    <div class="title">用户登录</div>
    <div class="content">
      <!-- 表单 -->
      <form>
        <InputGroup
        :name="'email'"
        :type="'text'"
        :value="''"
        :placeholder="'请输入邮箱'"
        :label="'邮箱'"
        v-model="user.email"
        ></InputGroup>

        <InputGroup
        :name="'password'"
        :type="'password'"
        :value="''"
        :placeholder="'请输入密码'"
        :label="'密码'"
        v-model="user.password"
        ></InputGroup>
      </form>
      <!-- 表单end -->
      <div class="btn_warp">
        <YBotton
        :disabled="isDisabled"
        @click="loginClick"
        >登陆</YBotton>
      </div>
      <div class="footer_warp">
        |<button class="register" @click="$router.push('/register')">注册账号</button>|
      </div>
    </div>
  </div>
</template>
<script>
import InputGroup from '../components/inputGroup.vue'
import YBotton from '../components/YBotton.vue'
export default {
  data(){
    return {
     user:{
       email:'',
       password:''
     }
    }
  },
  methods:{
 loginClick() {
      var reg = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (!reg.test(this.user.email)) {
        alert('请输入合法的邮箱地址！');
        return;
      }

      // 实现登陆
      this.$axios.post('/api/users/login',this.user)
      .then(res => {
        console.log(res)
        // 存储token
        const {token} = res.data
        // 存储到webStorage
        localStorage.setItem('wxpyqToken',token)
        this.$router.push('/')
      })
    }

  },
  computed:{
 isDisabled(){
      if(this.user.email && this.user.password){
        return false
      }else{
        return true
      }
    }
  },
  components:{
    InputGroup,
    YBotton
  }
}
</script>
<style scoped>
.login{
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding:16px;
  box-sizing: border-box;
}

.title{
  margin-top:80px;
  font-size: 22px;
  text-align: center;
}

.footer_warp{
  position: absolute;
  left:0;
  bottom:16px;
  text-align: center;
  width:100%;
  color:#888;
}
.footer_warp  .register{
  font-size: 16px;
  outline: none;
  border:none;
  background-color: transparent;
  color:#7b8ca9;
}
.content,
.btn_warp{
  margin-top: 30px;
}
</style>
